import React from 'react';
import {Dispatch} from 'redux';
import {Form, Input, Modal, Select, Switch, InputNumber} from 'antd';
import {FormComponentProps} from 'antd/lib/form';

const FormItem = Form.Item;
const Option = Select.Option;

interface AddViewProps extends FormComponentProps {
  table?: any;
  modalVisible: boolean;
  handleModalVisible: () => void;
  handleAdd: (table: any, callback: () => void) => void;
  dispatch:Dispatch<any>;
}

interface AddViewState {
  authMode: string;
}

class AddView extends React.Component<AddViewProps, AddViewState> {
  state: AddViewState = {
    authMode: 'ssh',
  };

  componentDidMount() {
  }

  render() {
    const {modalVisible, form, handleModalVisible, handleAdd, table} = this.props;
    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        handleAdd({...table, ...fieldsValue}, handleModalVisible);
      });
    };
    const formLayout = {labelCol: {span: 7}, wrapperCol: {span: 14}};
    return (
      <Modal
        destroyOnClose
        title="新增员工"
        width={680}
        maskClosable={false}
        bodyStyle={{padding: '28px 0 0'}}
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => handleModalVisible()}
      >
        <FormItem label="姓名" {...formLayout}>
          {form.getFieldDecorator('name', {
            rules: [{required: true, message: '姓名不能为空'}],
          })(<Input placeholder="请输入姓名"/>)}
        </FormItem>
        <FormItem label="性别" {...formLayout}>
          {form.getFieldDecorator('sex', {
            rules: [{required: true, message: '性别不能为空'}],
          })(<Switch checkedChildren="男" unCheckedChildren="女" />)}
        </FormItem>
        <FormItem label="年龄" {...formLayout}>
          {form.getFieldDecorator('age', {
            rules: [{required: true, message: '年龄不能为空'}],
          })(<InputNumber min={1} max={9999} style={{ width: 150 }} />)}
        </FormItem>
        <FormItem label="职级" {...formLayout}>
          {form.getFieldDecorator('level', {})(
          <Select style={{ width: 150 }}>
            <Option value="P5">员工</Option>
            <Option value="P6">高级</Option>
            <Option value="P7">架构</Option>
            <Option value="P8">主任</Option>
            <Option value="P9" disabled>老板</Option>
          </Select>
          )}
        </FormItem>
        <FormItem label="手机号" {...formLayout}>
          {form.getFieldDecorator('phone', {
            rules: [{required: true, message: '手机号不能为空'}],
          })(<Input placeholder="请输入手机号"/>)}
        </FormItem>
        <FormItem label="身份证" {...formLayout}>
          {form.getFieldDecorator('idCard', {
            rules: [{required: true, message: '身份证不能为空'}],
          })(<Input placeholder="请输入身份证"/>)}
        </FormItem>
        <FormItem label="描述" {...formLayout}>
          {form.getFieldDecorator('description', {})(<Input placeholder="请输入描述"/>)}
        </FormItem>
      </Modal>
    );
  }
}

export default Form.create<AddViewProps>()(AddView);
